<template>
<div>
  <el-page-header @back="goBack" content="找回密码">
  </el-page-header>
    <div class="login-form">
      <label for="username">请输入用户名：</label>
      <input type="text" id="username" v-model="username">
      <br>
      <label for="secret_answer">密保问题：你最喜欢食物是什么？</label>
      <input type="text" id="secret_answer" v-model="secret_answer">
      <button @click="submitForm" :disabled="isSubmitting">提交</button>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </div>
</div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        username: '',
        secret_answer: '',
        errorMessage: '',
        isSubmitting: false
      };
    },
    methods: {
      goBack() {
        this.$router.replace('/');
      },
      
      submitForm(){
        if (!this.username || !this.secret_answer) {
          this.errorMessage = '请填写完整信息';
          return;
        }
        axios.post('http://localhost:8081/springboot01/user/findPwd', 
    {
      username: this.username,
      secret_answer: this.secret_answer
    },
    {
      headers: {
        'Content-Type': 'application/json'
      }
    }
  )

  .then(response => {
    console.log('Response data:', response.data);
    if (response.data.msg ==="请求成功!"  ) {
      alert("您的密码为："+response.data.data)
    }    
else{
  alert(response.data.msg)
}
})

  .catch(error => {
    console.error('找回失败:', error);
    this.error = '找回失败，请重新找回';
  });
      }
    }
  };
  </script>
  
  <style scoped>
  .login-form {
    text-align: center;
    align-items: center;
    max-width: 300px;
    margin:  auto;
    margin-top: 10%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .login-form label {
    margin-bottom: 10px;
    display: block;
  }
  
  .login-form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  
  .error-message {
    color: red;
    margin-top: 10px;
  }
  button {
  width: 100%;
  height: 2.25rem;
  background-color: #ff9bad;
  color: white;
  border: none;
  border-radius: 3rem;
  font-size: 0.8em;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

button:hover {
  color: #ff9bad;
}

button:after {
  content: "";
  background: white;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skew(-45deg) scale(0, 1);
  transition: all 0.5s;
}

button:hover:after {
  transform: skew(-45deg) scale(1, 1);
}

  </style>
  